<script setup lang="ts">
import {ConfirmAqiDataDto} from "@/ts/entityTypes.ts";

let {description} = defineProps<{description: ConfirmAqiDataDto}>()

const emits = defineEmits(
    ["cancelPreview"]
)
const cancel = ()=>{
  emits('cancelPreview', false)
}

const aqiToText = (aqi: number = 0) => {
  switch (aqi) {
    case 1:
      return '优'
    case 2:
      return '良'
    case 3:
      return '轻度污染'
    case 4:
      return '中度污染'
    case 5:
      return '重度污染'
    case 6:
      return '严重污染'
    default:
      return '未知'
  }
}
</script>

<template>
  <div class="main-content">
    <el-descriptions
        style="width: 90%"
        title="公众监督数据详情"
        direction="horizontal"
        :column="1"
        border
    >
      <template #extra>
        <el-button type="primary" @click="cancel()">返回</el-button>
      </template>
      <el-descriptions-item label="确认AQI数据编号">{{description?.id}}</el-descriptions-item>
      <el-descriptions-item label="确认信息所在地址" :span="2">
        <el-tag class="tag-content" size="small">{{ description?.confirmAddress.province }}</el-tag>
        <el-tag class="tag-content" size="small">{{ description?.confirmAddress.city }}</el-tag>
        <el-tag class="tag-content" size="small">{{ description?.confirmAddress.detailedAddress }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="确认AQI等级">
        <el-tag class="tag-content" size="small">{{description?.aqi}}级</el-tag>
        <el-tag class="tag-content" size="small">{{aqiToText(description?.aqi)}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="确认日期时间">
        <el-tag class="tag-content" size="small">{{description?.updateTime.substring(0, 10)}}</el-tag>
        <el-tag class="tag-content" size="small">{{description?.updateTime.substring(11, 19)}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="网格员信息">
        <el-tag class="tag-content" size="small">{{description?.inspector.realName}}</el-tag>
        <el-tag class="tag-content" size="small">{{description?.inspector.telNum}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="公众监督员信息">
        <el-tag class="tag-content" size="small">{{description?.supervisor.realName}}</el-tag>
        <el-tag class="tag-content" size="small">{{description?.supervisor.telNum}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="反馈信息描述">
        {{description?.description}}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped>
.main-content{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column;
  width: 100%;
  margin-top: 1.5rem;
}
.tag-content{
  margin-right: 0.5rem
}
</style>
